<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <el-input v-model="queryParams.deviceName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <el-tree
      class="tree-border"
      :data="menuOptions"
      show-checkbox
      ref="dept"
      node-key="id"
      :check-strictly="!form.deptCheckStrictly"
      empty-text="加载中，请稍后"
      :check-on-click-node="true"
      :props="defaultProps"
      @check="changetree"
      @check-change="handleNodeClick"
    ></el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="selectedIcon" size="mini">确 定</el-button>
      <el-button @click="selectedIcon" size="mini">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { treeDeviceType,listDeviceType } from "@/api/jetLinks/deviceType";
import icons from './requireIcons';
export default {
  name: 'IconSelect',
  data() {
    return {
      name: '',
      iconList: icons,
      // 产品分类列表
      menuOptions: [],
      dataInfo : null,
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
        id:"id"
      },
      // 查询参数
      queryParams: {
        deviceName: null,
      },
    }
  },
  created() {
    
    this.getList();
  },
  methods: {
     /** 查询产品列表 */
    getList() {
      treeDeviceType(this.queryParams).then(response => {
        this.menuOptions = response.data;
      });
    }, 

    filterIcons() {
      this.iconList = this.menuOptions;
      if (this.queryParams.deviceName) {
        this.getList();
      }
    },
    selectedIcon() {
      this.$emit('selected', this.dataInfo);
      document.body.click();
      this.$refs.dept.setCheckedNodes([]);
    },
    reset() {
      this.name = ''
      this.iconList = icons
    },
    handleNodeClick(data, checked, node) {
      if (checked) {
        this.$refs.dept.setCheckedKeys([data.id]);
        this.dataInfo = data;
      }
    },
    
    changetree(data, lst) {
      if (lst.checkedKeys.length == 0) {
        //这里的treeForm是你el-tree命名的ref的值
        this.$refs.dept.setCheckedKeys([data.id]);
        this.dataInfo = data;
      }
    },
   
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-list {
      height: 200px;
      overflow-y: scroll;
      div {
        height: 30px;
        line-height: 30px;
        margin-bottom: -5px;
        cursor: pointer;
        width: 33%;
        float: left;
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
</style>
